<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="OrcasThemes">
   <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
   <title></title>
   <!-- Bootstrap核心CSS -->
   <link href="css/bootstrap.css" rel="stylesheet">
   <!-- 自定义样式 -->
   <link rel="stylesheet" href="css/screen.css">
   <link rel="stylesheet" href="css/animation.css">
   <!--[if IE 7]>
    兼容IE7的样式
    <![endif]-->
   <link rel="stylesheet" href="css/font-awesome.css">
   <!--[if lt IE 8]>
    兼容IE8以下版本的样式
    <![endif]-->
   <link href="css/lity.css" rel="stylesheet">
   <style>
      [v-cloak] {
         display: none;
      }
   </style>
</head>


<body>
   <!-- Vue应用根节点 -->
   <div id="myapp" v-cloak>
      <!-- 视频详情页主体 -->
      <div id="single-video" class="container-fluid standard-bg">
         <!-- 顶部导航栏 -->
         <div class="row header-top">
            <div class="col-lg-3 col-md-6 col-sm-5">
               <!-- 网站Logo -->
               <a class="main-logo" href="home.html"><img src="img/main-logo.png" class="main-logo" alt="Muvee Reviews"
                     title="Muvee Reviews"></a>
            </div>
            <div class="col-lg-6 hidden-md text-center hidden-sm hidden-xs">
               <!-- 大屏幕中间区域预留 -->
            </div>
            <div class="col-lg-3 col-md-6 col-sm-7 hidden-xs">
               <div class="right-box">
                  <!-- 删除视频按钮，调用delete_video方法 -->
                  <button type="button" class="access-btn" v-on:click="delete_video()" v-show="userRole">视频删除</button>
                  <!-- 修改视频按钮，弹出修改模态框 -->
                  <button type="button" class="access-btn" data-toggle="modal" data-target="#enquirypopup"
                     v-show="userRole">视频修改</button>
               </div>
            </div>
         </div>

         <!-- 主导航菜单 -->
         <div class="row home-mega-menu ">
            <div class="col-md-12">
               <nav class="navbar navbar-default">
                  <div class="navbar-header">
                     <!-- 移动端汉堡菜单按钮 -->
                     <button class="navbar-toggle" type="button" data-toggle="collapse"
                        data-target=".js-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                     </button>
                  </div>

                  <!-- 导航菜单内容 -->
                  <div class="collapse navbar-collapse js-navbar-collapse megabg dropshd ">
                     <!-- 搜索框 -->
                     <div class="search-block">
                        <form>
                           <input type="search" placeholder="Search">
                        </form>
                     </div>
                  </div>
               </nav>
            </div>
         </div>

         <!-- 视频详情内容区 -->
         <div class="row">
            <!-- 侧边栏，小屏幕下隐藏 -->
            <div class="col-lg-2 col-md-4 hidden-sm hidden-xs">
            </div>

            <!-- 视频主体内容 -->
            <div id="single-video-wrapper" class="col-lg-10 col-md-8">
               <div class="row">
                  <!-- 视频详情信息 -->
                  <div class="col-lg-9 col-md-12 col-sm-12">
                     <article class="post-video">
                        <!-- 视频信息区 -->
                        <div class="video-info">
                           <!-- 16:9比例的视频播放区域 -->
                           <div class="embed-responsive embed-responsive-16by9 video-embed-box">
                              <!-- 使用v-bind绑定视频源 -->
                              <iframe v-bind:src="video.video" class="embed-responsive-item"></iframe>
                           </div>

                           <!-- 视频元信息 -->
                           <div class="metabox">
                              <span class="meta-i">
                                 <i class="fa fa-thumbs-up" aria-hidden="true"></i>20.895
                              </span>
                              <span class="meta-i">
                                 <i class="fa fa-thumbs-down" aria-hidden="true"></i>3.981
                              </span>
                              <span class="meta-i">
                                 <i class="fa fa-user"></i><a href="#" class="author" title="John Doe">John Doe</a>
                              </span>
                              <span class="meta-i">
                                 <i class="fa fa-clock-o"></i>March 16. 2017
                              </span>
                              <span class="meta-i">
                                 <i class="fa fa-eye"></i>1,347,912 views
                              </span>

                              <!-- 视频评分 -->
                              <div class="ratings">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                                 <i class="fa fa-star" aria-hidden="true"></i>
                                 <i class="fa fa-star-half-o" aria-hidden="true"></i>
                                 <i class="fa fa-star-o"></i>
                                 <i class="fa fa-star-half"></i>
                              </div>
                           </div>
                        </div>

                        <div class="clearfix spacer"></div>

                        <!-- 视频描述区 -->
                        <div class="video-content">
                           <h2 class="title main-head-title">视频描述</h2>
                           <!-- 使用v-bind绑定视频描述 -->
                           <p>{{video.info}}</p>
                        </div>

                        <div class="clearfix spacer"></div>

                        <!-- 广告位 -->
                        <div class="main-roll-advertise-box">
                           <!-- 广告内容 -->
                        </div>
                     </article>
                  </div>

                  <!-- 视频侧边广告，中等屏幕下隐藏 -->
                  <div class="col-lg-3 hidden-md hidden-sm">
                  </div>
               </div>

               <div class="clearfix spacer"></div>

               <div class="row">
                  <!-- 相关推荐等其他内容 -->
               </div>
            </div>
         </div>
      </div>

      <!-- 频道区块 -->
      <div id="channels-block" class="container-fluid channels-bg">
         <div class="container-fluid ">
            <div class="col-md-12">
               <!-- 频道内容区 -->
               <section id="channels">
               </section>
               <div class="clearfix"></div>
            </div>
         </div>
      </div>

      <!-- 底部横幅广告 -->
      <div id="bottom-banner" class="container text-center">
      </div>

      <!-- 页脚区域 -->
      <div id="footer" class="container-fluid footer-background">
         <div class="container">
            <footer>
               <!-- 页脚内容区 -->
               <div class="row">
                  <!-- 标签区域 -->
                  <!-- 最新文章区域 -->
                  <!-- 链接区域 -->
               </div>

               <!-- 版权信息 -->
               <div class="row copyright-bottom text-center">
                  <div class="col-md-12 text-center">
                     <a href="" class="footer-logo" title="Video Magazine Bootstrap HTML5 template">
                        <img src="img/footer-logo.png" class="img-responsive text-center"
                           alt="Video Magazine Bootstrap HTML5 template">
                     </a>
                  </div>
               </div>
            </footer>
         </div>
      </div>

      <!-- 视频修改模态框 -->
      <div id="enquirypopup" class="modal fade in " role="dialog">
         <div class="modal-dialog">
            <!-- 模态框内容 -->
            <div class="modal-content row">
               <div class="modal-header custom-modal-header">
                  <button type="button" class="close" data-dismiss="modal">×</button>
                  <h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>视频信息修改</h2>
               </div>
               <div class="modal-body">
                  <!-- 视频修改表单 -->
                  <form name="info_form" class="form-inline" action="#" method="post">
                     <div class="form-group col-sm-12">
                        <!-- 使用v-model双向绑定视频名称 -->
                        <input type="text" class="form-control" name="name" v-model="video.name">
                     </div>
                     <div class="form-group col-sm-12">
                        <!-- 使用v-model双向绑定视频描述 -->
                        <input type="text" class="form-control" name="info" v-model="video.info">
                     </div>
                     <div class="form-group col-sm-12">
                        <!-- 提交按钮，调用update_video方法 -->
                        <button class="subscribe-btn pull-right" title="Subscribe"
                           v-on:click.prevent="update_video()">提交</button>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </div>

   <!-- JavaScript部分 -->
   <!-- jQuery (Bootstrap的JavaScript插件依赖) -->
   <script src="js/jquery-1.12.1.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
   <script src="js/lity.js"></script>
   <!-- 引入Vue.js -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script>
      // 导航栏下拉菜单悬停效果
      $(".nav .dropdown").hover(function () {
         $(this).find(".dropdown-toggle").dropdown("toggle");
      });
   </script>
   <script>
      // 创建Vue应用实例
      let app = new Vue({
         el: '#myapp',
         data: {
            video: {},// 视频数据对象
            userRole: false, // 初始值
         },
         methods: {
            // 从URL参数中获取指定名称的参数值
            get_param: function (name) {
               return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
            },

            // 根据ID获取视频详情
            get_video: function () {
               // 从URL中获取视频ID
               var id = this.get_param("id");
               // 发送AJAX请求获取视频数据
               $.ajax({
                  url: "/video/" + id,
                  type: "get",
                  context: this,
                  success: function (result, status, xhr) {
                     // 将返回的视频数据赋值给data中的video对象
                     this.video = result;
                  }
               })
            },

            // 更新视频信息
            update_video: function () {
               // 发送PUT请求更新视频信息
               $.ajax({
                  url: "/video/" + this.video.id,
                  type: "put",
                  data: JSON.stringify(this.video),  // 将视频对象序列化为JSON
                  context: this,
                  success: function (result, status, xhr) {
                     alert("修改视频信息成功");
                     window.location.reload();  // 刷新页面
                  }
               })
            },

            // 删除视频
            delete_video: function () {
               if (confirm("确定要删除这个视频吗？此操作不可撤销。")) {
                  // 发送DELETE请求删除视频
                  $.ajax({
                     url: "/video/" + this.video.id,
                     type: "delete",
                     context: this,
                     success: function (result, status, xhr) {
                        alert("删除视频成功");
                        window.location.href = "/home.html";  // 重定向到首页
                     }
                  })
               }
            }
         },
         mounted () {
            // 解析 URL 参数
            const params = new URLSearchParams(window.location.search);
            // 注意：参数默认是字符串，需手动转为布尔值
            this.userRole = params.get('user_role') === 'true'; // 字符串转布尔
            console.log('接收的布尔值:', this.userRole); // 输出 true/false
         }
      });
      app.get_video();
   </script>

</html>